<template>
  <div :class="className" :style="{height:height,width:width,top:top}" />
</template>

<script>
import * as echarts from 'echarts' // echarts theme
import drawMixin from "@/utils/drawMixin";

//反诈反赌
const animationDuration = 2000

export default {
  mixins: [drawMixin],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    top: {
      type: String,
      default: '8%'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '90%'
    }
  },

  data () {
    return {
      // 查询参数
      params: {
        monthCnt: -10
      },
      chart: null,
      chartTimer: null,
      chartData: {
        month: '2023-05',
        manaOrgName: ["中国建设银行", "中国银行", "湖北银行", "交通银行", "中国工商银行", "中国邮政储蓄银行", "武汉农村商业银行", "平安银行", "招商银行","汉口银行"],
        checkSuccNum: [ 107169,77002,54424,33062,30845,29325,22121,20508,20438,118661],
        batchCheckSuccNum: [0,4,317,249,354,0,0,1129,0,62],
        victimProtSuccNum: [44303,38599,47203,44660,35026,0,50615,51415,1890,34890]
      },
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.initChart()
    })

    this.getChartData()
  },
  beforeDestroy () {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart () {
      this.chart = echarts.init(this.$el, 'macarons')
      this.setOptions(this.chartData)
    },

    getChartData() {
      this.chartTimer = setInterval(() => {
        // getOrganQryCollect(this.params).then(response => {
        //   this.chartData.month = response.month;
        //   this.chartData.manaOrgName = response.manaOrgName;
        //   this.chartData.checkSuccNum = response.checkSuccNum;
        //   this.chartData.batchCheckSuccNum = response.batchCheckSuccNum;
        //   this.chartData.victimProtSuccNum = response.victimProtSuccNum;
        //   this.params.monthCnt = this.params.monthCnt + 1
        //   if (this.params.monthCnt === 0) {
        //     this.params.monthCnt = -10;
        //   }
        // });
        this.setOptions(this.chartData)
      }, 10 * 1000)
    },

    setOptions ({ month, manaOrgName, checkSuccNum, batchCheckSuccNum, victimProtSuccNum} = {}) {
      this.chart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // Use axis to trigger tooltip
            type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
          }
        },
        title: {
          text: month,
          textStyle: {
            color: '#fff',
            fontSize: 40
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value'
        },
        yAxis: {
          name: '机构名称',
          type: 'category',
          //key文字大小
          // nameTextStyle: {
          //   fontSize: 20,
          //   color: '#ffffff',
          // },
          axisLabel: {
            formatter: "{value} ",
            textStyle: {
              fontSize: 17,//字体大小
              color: '#ffffff'
            }
          },
          data: manaOrgName,
          inverse: true,
          splitLine: { show: false },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          //key和图间距
          offset: 10,
          //动画部分
          animationDuration: animationDuration,
          animationDurationUpdate: animationDuration,

        },
        series: [
          {
            name: '实时核查笔数',
            realtimeSort: true, //是否开启该系列的实时排序
            //seriesLayoutBy: "column", //指定如何对应dataset中的数据
            type: 'bar',
            stack: 'total',
            label: {
              position: 'inside',
              show: true,
              color: '#fff'
            },
            emphasis: {
              focus: 'series'
            },
            data: checkSuccNum,
            smooth: true,
            valueAnimation: true,
            barWidth: 40,
            barGap: 10,
            itemStyle: {
              emphasis: {
                barBorderRadius: 15,
              },
              //颜色样式部分
              normal: {
                barBorderRadius: 15,
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  { offset: 0, color: "#235ec7" },
                  { offset: 1, color: "#52bef5" },
                ]),
              },
            }
          }
        ],
        //动画部分
        animationDuration: 0,
        animationDurationUpdate: animationDuration,
        animationEasingUpdate: "linear", //数据更新动画缓动效果
        animationEasing: 'linear'
      })
    }
  }
}
</script>
